<!DOCTYPE html>
<html>
<head>
	<title>取货助手 -- 快件e栈服务平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link href="css/normalize.css" type="text/css" rel="stylesheet" />
	<link href="css/common.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script src="js/notice.js" type="text/javascript"></script>
	<script src="js/regexp.js" type="text/javascript"></script>
	<script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
	<script type="text/javascript">
		$.ajax({
			url:"wxconf.do",
			type:"GET",
			data:"xurl="+location.href.split('#')[0],
			success:function(data){
					//data = JSON.parse(data);
				wx.config({
					debug: false, // 开启调试模式,
								 // 调用的所有api的返回值会在客户端alert出来，
								 // 若要查看传入的参数，可以在pc端打开，
								 // 参数信息会通过log打出，仅在pc端时才会打印。
					appId: data.appid, // 必填，公众号的唯一标识
					timestamp: data.timestamp, // 必填，生成签名的时间戳
					nonceStr: data.nonceStr, // 必填，生成签名的随机串
					signature: data.signature,// 必填，签名
					jsApiList: ['startRecord','stopRecord','scanQRCode','playVoice','uploadVoice','downloadVoice','onVoiceRecordEnd','translateVoice'
						,'downloadVoice', 'onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
				});
			},error:function(){

			}
		});
	
		wx.ready(function(){
			// config信息验证后会执行ready方法，
			// 所有接口调用都必须在config接口获得结果之后，
			// config是一个客户端的异步操作，
			// 所以如果需要在页面加载时就调用相关接口，
			// 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
			// 则可以直接调用，不需要放在ready函数中。
			$("#scanQRCodeBtn").click(x1);
		});

		wx.error(function(res){
			// config信息验证失败会执行error函数，
			// 如签名过期导致验证失败，
			// 具体错误信息可以打开config的debug模式查看，
			// 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
			alert("扫描错误")
		});
	
	function x1(){
		wx.scanQRCode({
			needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
			scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
			success: function (res) {
				var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
				let code = null;
				let phone = null;
				if(result.indexOf("express_")===0){
					// 扫描到快递取件码，按照取件码查询
					code = result.substring(8);
					$("#expPickUserId").val(code);
				} else if (result.indexOf("phone_")===0) {
					// 扫描到用户信息，按照用户手机号查询所有快递
					phone = result.substring(6);
					$("#expPickUserId").val(phone);
				}
			}
		});
	}
	</script>
	<style type="text/css">
		.expPickCont{
			padding-bottom: 20px;
		}
		.expPickCont .expPickIcon{
			width: 15%;
			margin: 0 auto;
			text-align: center;
		}
		.expPickCont .expPicTitle{
			text-align: center;
			font-weight: bold;
		}

		.searchInfoBtn{
			width: 90%;
			margin: 0 auto;
			text-align: center;
			line-height: 46px;
			border-radius: 23px;
			background: #1f72ff;
			color: #fff;
			font-weight: bolder;
		}

		.expUserInfoCont{
			width: 90%;
			margin: 20px auto 20px; 
			font-size: 14px;
		}
		
		.expUserInfoNull{
			width: 100%;
			line-height: 150px;
			text-align: center;
			color: #888888;
			display: none;
		}
		.expInfoCont{
			width:100%;
			box-sizing: border-box;
			background-color:#fff;
			border-radius: 10px;
			padding: 30px;
			margin-bottom: 30px;
		}
		.expInfoCont td:nth-of-type(1){
			text-align: right;
			height:2em;
			line-height: 2em;
		}
		.expInfoCont>.btns{
			border-top: 1px dashed #666;
			padding-top: 20px;
			text-align: right;
			margin-top: 10px;
		}
		.btn-success{
			padding: 5px 15px;
			color: #fff;
			background: #2F9925;
			border: 1px solid #fff;
			border-radius: 5px;
		}
		.status2{
			position: relative;
		}
		.status2_bg{
			position: absolute;
			left:0px;
			top:0px;
			bottom:0px;
			right:0px;
		}
		.status2_bg>img{
			width:30%;
			margin: 0 auto;
			margin-top: 50px;
			opacity: 0.5;
			
		}
		.status1{
			display: block;
		}
	</style>
</head>
<body>
<div class="content">
	<div class="headerNav">
		<div class="headerNavTop"><div class="headerNavIcon headerNavIconOut"><span></span><span></span></div></div>
		<div class="headerNavCont">
			<a href="">快递首页</a>
			<a href="">个人中心</a>
			<a href="">送货上门</a>
			<a href="">懒人排行</a>
			<a href="">快递助手</a>
		</div>
	</div>
	<div class="expPickCont">
		<div class="expPickIcon">
			<img src="images/pickexpicon.png" width="100%">
		</div>
		<p class="expPicTitle">确认取货</p>

		<div class="expPickInput">
			<form>
				<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
				<input id="wxCode" type="hidden" value="${wxCode}" />
				<div class="userInputCont">
					<div class="inputTypeCont">
						<div class="inputTitle" style="width: 100px">取货码或手机号</div>
						<input type="text" id="expPickUserId" class="commonInputFunc" name="username" placeholder="请输入取货码或手机号" />
						<div class="commonFuncBtnScan" id="scanQRCodeBtn"></div>
					</div>
				</div>
			</form>
			<div class="searchInfoBtn" id="searchBtn">查找信息</div>
		</div>
	</div>

	<div class="expUserInfoCont" id="exInfoContent">
		<div class="expUserInfoNull" id="infoNull">暂未查到相关信息</div>
	</div>

</div>

</body>
<script src="js/layer/layer.js"></script>
<script>
	const phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
	const codeReg = /^[1-9]\d{5}$/;
	// 确认收货按钮，根据取件码确认收货
	function updateStatus(code,id) {
		let windowID = layer.load(2);
		$.getJSON("/wechat/updateStatus.do",{code:code},function (values) {
			layer.close(windowID);
			layer.msg(values.result);
			if (values.status===0){
				$("#"+id).hide();
			}
		});
	}
	$(function () {
		$("#searchBtn").click(function () {
			$("#exInfoContent").html("");
			let input = $.trim($("#expPickUserId").val());
			if (input!==null&&phoneReg.test(input)) {
				let windowID = layer.load(2);
				$.getJSON("/wechat/getUserExList.do",{phone:input},function(values){
					layer.close(windowID);
					layer.msg(values.result);
					if (values.status===0){
						// values: [{"id":177,"ex_num":"12312652","username":"小张","userphone":"13897845154","company":"安能快递","code":"998217","intime":"2021-03-10 09:03:19","outtime":"未出库","status":"待取件","staffphone":"16667778888"}]
						let exArr = values.data;
						for (let i=0; i<exArr.length; i++){
							let ex = exArr[i];
							let itemHTML = '<div class="expInfoCont status1" id="ex_' + i + '">' +
									'<table>' +
									'<tr><td>快递公司：</td><td>' + ex.company + '</td></tr>' +
									'<tr><td>快递单号：</td><td>' + ex.ex_num + '</td></tr>' +
									'<tr><td>到件时间：</td><td>' + ex.intime + '</td></tr>' +
									'<tr><td>取件码：</td><td>' + ex.code + '</td></tr>' +
									'</table>' +
									'<div class="btns">' +
									'<button class="btn-success" onclick="updateStatus(\'' + ex.code + '\',\'ex_' + i + '\')">确认收货</button>' +
									'</div></div>';
							$("#exInfoContent").append(itemHTML);
						}
					} else if (values.status===-1) {
						let itemHTML = '<div class="expUserInfoNull" id="infoNull">暂未查到相关信息</div>';
						$("#exInfoContent").append(itemHTML);
						$("#infoNull").show();
					}
				});
			} else if (input!==null&&codeReg.test(input)){
				let windowID = layer.load(2);
				$.getJSON("/wechat/getExByCode.do",{code:input},function(values){
					layer.close(windowID);
					layer.msg(values.result);
					if (values.status===0) {
						let ex = values.data;
						let itemHTML = '<div class="expInfoCont status1" id="ex">' +
								'<table>' +
								'<tr><td>快递公司：</td><td>' + ex.company + '</td></tr>' +
								'<tr><td>快递单号：</td><td>' + ex.ex_num + '</td></tr>' +
								'<tr><td>到件时间：</td><td>' + ex.intime + '</td></tr>' +
								'<tr><td>取件码：</td><td>' + ex.code + '</td></tr>' +
								'</table>' +
								'<div class="btns">' +
								'<button class="btn-success" onclick="updateStatus(\'' + ex.code + '\',\'ex\')">确认收货</button>' +
								'</div></div>';
						$("#exInfoContent").append(itemHTML);
					} else if (values.status===-1) {
						let itemHTML = '<div class="expUserInfoNull" id="infoNull">暂未查到相关信息</div>';
						$("#exInfoContent").append(itemHTML);
						$("#infoNull").show();
					}
				});
			} else {
				layer.alert("请输入正确的手机号或取件码！", {icon:0, shade:0.2});
			}
		});
	});
</script>
</html>